<!--
 * @Description:日期转换组件
 * @Author: gaoyunpeng
 * @Date: 2022-01-22 09:37:41
 * @LastEditors: gaoyunpeng
-->
<template>
  <div class="datetime">
    <span> {{ dateYear }}</span>
    <span>{{ dateWeek }}</span>
    <span>{{ dateDay }}</span>
  </div>
</template>

<script>
import { formatTime } from '@/utils/index.js'
export default {
  data() {
    return {
      timing: null,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
    }
  },
  destroyed() {
    clearInterval(this.timing)
    // 组件销毁时，销毁定时器 防止内存溢出
  },
  methods: {
    timeFn() {
      this.timing = setInterval(() => {
        this.dateDay = formatTime(new Date(), 'HH:mm:ss')
        this.dateYear = formatTime(new Date(), 'yyyy.MM.dd')
        this.dateWeek = this.weekday[new Date().getDay()]
      }, 1000)
    }
  },
  mounted() {
    this.timeFn()
  }
}
</script>

<style lang="scss" scoped>
@import '~@/styles/mixin.scss';
.datetime {
  @include font_color('normal_text_color');
  span {
    font-size: 16px;
    &:nth-child(2) {
      margin: 0 5px;
    }
  }
}
</style>
